<template>
  <el-card>
    <template #header>
      基本信息
    </template>
    <div style="display: flex;">
      <div class="info-box">
        <div>名称：{{ consumeInfo.buyerName }}</div>
        <div>负责人：{{ consumeInfo.legalPerson }}</div>
        <div>联系电话：{{ consumeInfo.tel }}</div>
        <div>经营地址：{{ consumeInfo.address }}</div>
        <div>注册时间：{{ $route.query.registTime }}</div>
        <div>所属代理商：{{ consumeInfo.deptName }}</div>
        <div>相关市场人员：{{ consumeInfo.realName || '--' }}</div>
        <div>溯源模板：{{ consumeInfo.tts }}</div>
      </div>
      <div style="flex: 1; margin-left: 30px;">
        <div>
          <el-button type="text" @click="downloadHb">点击下载溯源海报</el-button>
        </div>
        <div>溯源二维码:</div>
        <div id="qrcodeDiv"></div>
      </div>
    </div>
  </el-card>
  <el-card style="margin-top: 20px;" v-loading="insuranceLoading">
    <template #header>
      保险记录
    </template>
    <div class="tabBox">
      <el-table border class="tabBox">
        <el-table-column label="序号" type="index" width="70" :index="idx => (insuranceSearchForm.pageNumber - 1) * insuranceSearchForm.pageSize + idx + 1" />
        <el-table-column label="保险公司"></el-table-column>
        <el-table-column label="保险类型"></el-table-column>
        <el-table-column label="金额"></el-table-column>
        <el-table-column label="购买时间"></el-table-column>
        <el-table-column label="到期时间"></el-table-column>
      </el-table>
    </div>
    <div class="pageContainer">
      <el-pagination
        hide-on-single-page
        v-model:currentPage="insuranceSearchForm.pageNumber"
        :page-sizes="[10, 20, 50, 100]"
        v-model:page-size="insuranceSearchForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="insuranceTotal"
        @size-change="insuranceSearchForm.pageNumber = 1; getInsuranceData()"
        @current-change="getInsuranceData()">
      </el-pagination>
    </div>
  </el-card>
  <el-card style="margin-top: 20px;" v-loading="visitLoading">
    <template #header>
      <div style="display: flex; justify-content: space-between; align-items: center;">
        <span>回访记录</span>
        <div>
          <el-button type="primary" @click="addVisitDialog = true; addVisitForm.visteTime = $timeFormat()">添加回访</el-button>
          <el-button type="primary" @click="exportVisit">导出</el-button>
        </div>
      </div>
    </template>
    <div class="tabBox">
      <el-table :data="visitData" border class="tabBox">
        <el-table-column label="序号" type="index" width="70" :index="idx => (visitSearchForm.pageNumber - 1) * visitSearchForm.pageSize + idx + 1" />
        <el-table-column label="操作时间" prop="date"></el-table-column>
        <el-table-column label="操作人" prop="realName"></el-table-column>
        <el-table-column label="操作方式" show-overflow-tooltip>
          <template v-slot="{ row }">
            {{ optType[row.optType] }}
          </template>
        </el-table-column>
        <el-table-column label="内容" prop="remarks" show-overflow-tooltip></el-table-column>
      </el-table>
    </div>
    <div class="pageContainer">
      <el-pagination
        hide-on-single-page
        v-model:currentPage="visitSearchForm.pageNumber"
        :page-sizes="[10, 20, 50, 100]"
        v-model:page-size="visitSearchForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="visitTotal"
        @size-change="visitSearchForm.pageNumber = 1; getVisitData()"
        @current-change="getVisitData()">
      </el-pagination>
    </div>
  </el-card>
  <!-- 添加回访的模态框 -->
  <el-dialog v-model="addVisitDialog" :close-on-click-modal="false" title="添加回访信息" width="500px">
    <el-form ref="elAddVisitForm" :model="addVisitForm" label-width="120px" :rules="addVisitFormRules">
      <el-form-item label="回访时间" prop="visteTime">
        <el-date-picker
          :clearable="false"
          v-model="addVisitForm.visteTime"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="datetime"
          placeholder="请选择回访时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="下次回访时间" prop="nextVisteTime">
        <el-date-picker
          :clearable="false"
          v-model="addVisitForm.nextVisteTime"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="datetime"
          placeholder="请选择下次回访时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="addVisitForm.remark" type="textarea" :rows="6"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="comfirmAddVisit">保存</el-button>
      <el-button @click="addVisitDialog = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script>
  export default {
    name: 'InactiveConsumerManageDetail'
  }
</script>

<script setup>
  
  import {
    inject,
    ref,
    reactive,
    onMounted,
    getCurrentInstance
  } from 'vue'
  
  import QRCode from '@/utils/QRCode.js';
  
  const $post = inject('$post');
  const $route = inject('$route');
  const $message = inject('$message');
  const $timeFormat = inject('$timeFormat');
  const $export = inject('$export');
  const {
    ctx
  } = getCurrentInstance();
  
  const consumeInfo = ref({});
  
  // 下载海报
  const downloadHb = () => {
    $post('/consumer/downloadhb', $route.query).then(res => {
      console.log(res);
    })
  }
  
  // 保险记录相关
  const insuranceSearchForm = reactive({
    pageNumber: 1,
    pageSize: 10,
    guid: $route.query.guid
  });
  
  const insuranceLoading = ref(false);
  
  const insuranceTotal = ref(0);
  
  const insuranceData = ref([])
  
  const getInsuranceData = () => {
    insuranceLoading.value = true;
    $post('/consumer/insurancePage', insuranceSearchForm).then(res => {
      insuranceData.value = res.data;
      insuranceTotal.value = res.pageObj.totalRecords
    }).finally(_ => insuranceLoading.value = false);
  }
  getInsuranceData();
  
  // 回访记录相关
 //  DISPATCH("DISPATCH", "分配任务"),
	// MOBILE("MOBILE", "手机终端开通试用"),
	// RETURNVISIT("RETURNVISIT", "回访客户"),
	// VISTTTASK("VISTTTASK", "回访任务"),
	// GET("GET", "领取"),
	// REFUSED("REFUSED", "搁置"),
	// STOP("STOP", "停滞"),
	// OPEN("OPEN", "开通试用"),
	// CANCEL("CANCEL", "取消试用"),
	// UPDATE("UPDATE", "修改试用"),
	// UPGRADE("UPGRADE", "升级正式版"),
	// ADDTRY("ADDTRY", "新增试用");
  
  const optType = {
    RETURNVISIT: '回访客户',
    VISTTTASK: '回访任务'
  }
  
  const visitSearchForm = reactive({
    pageNumber: 1,
    pageSize: 10,
    guid: $route.query.guid
  });
  
  const visitLoading = ref(false);
  
  const visitTotal = ref(0);
  
  const visitData = ref([])
  
  const getVisitData = () => {
    visitLoading.value = true;
    $post('/consumer/visitPage', visitSearchForm).then(res => {
      visitData.value = res.data;
      visitTotal.value = res.pageObj.totalRecords
    }).finally(_ => visitLoading.value = false);
  }
  getVisitData();
  
  // 添加回访相关
  const addVisitDialog = ref(false);
  
  const addVisitForm = reactive({
    guid: $route.query.guid,
    // 拜访时间
    visteTime: '',
    nextVisteTime: '',
    remark: ''
  })
  
  const addVisitFormRules = {
    visteTime: [{
      required: true, message: '请选择回访时间！', trigger: 'change'
    }],
    nextVisteTime: [{
      required: true, message: '请选择下次回访时间！', trigger: 'change'
    }]
  }
  
  // 确定添加回访记录
  const comfirmAddVisit = () => {
    ctx.$refs.elAddVisitForm.validate(res => {
      if (!res) return;
      $post('/tdltry/viste/add', addVisitForm).then(res => {
        $message.success('添加成功');
        getVisitData();
        addVisitDialog.value = false;
        ctx.$refs.elAddVisitForm.resetFields();
      })
    })
  }
  
  // 导出回访记录
  const exportVisit = () => {
    $post('/consumer/exportVisit', $route.query).then(res => {
      if (res.data) {
        $export(`/servlet/downloadFile?file=${encodeURI(res.data)}&newFileName=${encodeURI('回访记录.xls')}`);
      } else {
        $message.info(res.msg);
      }
    })
  }
  
  onMounted(() => {
    $post('/consumer/buyerInformation', $route.query).then(res => {
      consumeInfo.value = res.data;
      // 生成二维码
      new QRCode('qrcodeDiv', {
          text: 'http://syx.ybfresh.com/sy/wx/dddj/' + res.data.deptCode,
          width: 130,
          height: 130,
          colorDark : '#000000',
          colorLight : '#ffffff',
          correctLevel : QRCode.CorrectLevel.H
      })
    })
  })
  
</script>

<style lang="scss" scoped="scoped">
  
  .info-box {
    * {
      line-height: 2;
    }
  }
  
</style>
